<template>
  <div>
    <div class="overlay"></div>
    <div class="dialog">
      <div class="title">
		<img class="w-[30px] h-[30px]" style="display:inline-block" :src="errorIcon" />
		{{ title }}
	  </div>
	  <hr style="margin:10px 0;color:lightgray;"/>
      <div class="content">{{ content }}</div>
      <button class="close"  @click="emit('close')">Close</button>
    </div>
  </div>
</template>

<script setup lang="ts">
	import errorIcon from "../assets/icon/error.png"

defineProps<{
  title?: string,
  content?: string,
}>();
 
const emit = defineEmits<{
  close: void;
}>();
</script>

<style scoped>
	
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 16px;
  z-index: 2;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.content {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.close {
  float:right;
  background-color: #1772f6;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}
</style>